<template>
  <div>
    <div v-if="isPageLoading" class="page_loading fixed">
      <van-loading size="24px" vertical color="#fff">加载中...</van-loading>
    </div>
    <header>
      <van-nav-bar class="main_header notice_header" :title="title">
        <template #left>
          <span @click="goBack">返回</span>
        </template>
      </van-nav-bar>
    </header>
    <div v-if="peopleList.length > 0" class="approval_content">
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text=""
          error-text="请求失败，点击重新加载"
          :error.sync="error"
          @load="getdelegationList"
        >
          <div v-for="(item, index) in peopleList" :key="index" class="approval_item gl_py_10">
            <div class="gl_px_10">
              <van-row gutter="18">
                <van-col span="7">
                  <div>
                    <img class="peo_img" :src="getStaticAvatarUrl(item.register.imagePath)">
                  </div>
                </van-col>
                <van-col span="17">
                  <div class="text">
                    <p>
                      <span class="title">{{ item.register.name }}</span>
                      <span v-if="item.register.genderCode" class="gl_pl_10">
                        <template v-for="ktem in dict.gender">
                          {{ ktem.code === item.register.genderCode ? ktem.value: '' }}
                        </template>
                      </span>
                    </p>
                    <p>证件号码：{{ item.register.idCardNumber }}</p>
                    <p>
                      <span>角色：</span>
                      <van-tag v-for="tag in item.register.registerTags" :key="tag.id" class="gl_mr_5" plain type="primary">
                        {{ tag.registerTagType && tag.registerTagType.name ? tag.registerTagType.name : tag.registerTagTypeCode }}
                      </van-tag>
                    </p>
                  </div>
                </van-col>
              </van-row>
            </div>
            <van-row>
              <van-col span="24">
                <van-button type="info" size="small" class="sub_button gl_mt_15" @click="agreeJoin(item)">同意加入</van-button>
              </van-col>
            </van-row>
          </div>
        </van-list>
      </van-pull-refresh>
    </div>
    <div v-else>
      <van-empty description="暂无数据" />
    </div>
  </div>
</template>
<script>
import { api_GET_EventsManagementDelegationEntry, api_PUT_EventsManagementDelegationEntryId } from '@/extend/api/gameswaggerApi/app.js';
import { mapState, mapActions } from 'vuex';
import { Api_GET_EventsManagementDelegationEntryQO } from '@/lib/form/game/swaggerForm';

export default {
  data() {
    return {
      title: '审核中心',
      input2: '',
      Api_GET_EventsManagementDelegationEntryQO: new Api_GET_EventsManagementDelegationEntryQO(),
      delegationId: '',
      url: '',
      peopleList: [],
      // 是否处于加载状态
      loading: false,
      totalPage: 0,
      // 是否已经加载完成
      finished: false,
      isPageLoading: false,
      refreshing: false,
      // 是否加载失败
      error: false
    };
  },
  computed: {
    ...mapState({
      currentUserType: state => state.user.currentUserType,
      dict: state => state.dict.dict
    })
  },
  watch: {
    'currentUserType': {
      handler: function(val) {
        if (val) {
          this.Api_GET_EventsManagementDelegationEntryQO.DelegationId = val.delegationId;
          // this.Api_GET_EventsManagementDelegationEntryQO.RegisterId = val.registerId;
          this.getdelegationList();
        }
      },
      deep: true,
      immediate: true // 初始加载
    }
  },
  created() {
    this.gameId = this.$route.params.id;
    this.getDict();
    // this.getdelegationList();
  },
  methods: {
    ...mapActions({ getDict: 'dict/getDict' }),
    // 获取人员审核列表
    getdelegationList() {
      this.finished = false;
      this.isPageLoading = true;
      if (this.refreshing) {
        this.peopleList = [];
        this.refreshing = false;
        this.Api_GET_EventsManagementDelegationEntryQO.Page = 1;
      }
      this.Api_GET_EventsManagementDelegationEntryQO.IncludeRegister = true;
      this.Api_GET_EventsManagementDelegationEntryQO.IncludeTags = true;
      this.Api_GET_EventsManagementDelegationEntryQO.IncludeRegisterTags = true;
      this.Api_GET_EventsManagementDelegationEntryQO.IsApproved = null;

      this.Api_GET_EventsManagementDelegationEntryQO.SkipCount = (this.Api_GET_EventsManagementDelegationEntryQO.Page - 1) * this.Api_GET_EventsManagementDelegationEntryQO.MaxResultCount;
      api_GET_EventsManagementDelegationEntry(this.Api_GET_EventsManagementDelegationEntryQO).then(res => {
        var _data = res.items.filter(item => item.isApproved === null);
        var _total = res.totalCount;
        this.isPageLoading = false;
        this.peopleList = this.peopleList.concat(_data);
        // this.peopleList = this.peopleList.filter(item => item.isApproved === null);
        this.loading = false;
        if (_total > this.peopleList.length) {
          this.Api_GET_EventsManagementDelegationEntryQO.Page += 1;
        } else {
          this.finished = true;
        }
      }).catch(res => {
        this.isPageLoading = false;
        this.error = true;
        this.loading = false;
      });
    },
    onRefresh() {
      // 清空列表数据
      this.finished = false;
      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.getdelegationList();
    },
    // 同意加入
    agreeJoin(item) {
      if (item.isApproved === true) {
        this.$toast({ type: 'error', message: '该人员已经通过审核' });
      } else {
        const param = {
          delegationId: item.delegationId,
          registerId: item.registerId,
          isApproved: true
        };
        api_PUT_EventsManagementDelegationEntryId(item.id, param).then(res => {
          this.$toast({ type: 'success', message: '加入成功' });
          this.refreshing = true;
          this.onRefresh();
        }).catch(res => {
          this.$toast({ type: 'error', message: '审核失败' });
        });
      }
    },
    goBack() {
      this.$router.push({
        path: `/myCenter${this.gameId && '/' + this.gameId || ''}/`
      });
    },
    // 头像回显
    getStaticAvatarUrl(relativeUrl) {
      if (relativeUrl) {
        return WEB_CONFIG.VUE_APP_STATIC_FILE_RUL + relativeUrl;
      } else {
        return require('@/assets/images/face_default.png');
      }
    }
  }
};
</script>
<style scoped>
.approval_content{
  padding: 10px;
  height: 100%;
  width: 100%;
}
.approval_item{
  height: 163px;
  width: 100%;
  border-radius: 5px;
  overflow: hidden;
  border: 1px solid #efefef;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.09);
}
.peo_img{
  height: 100px;
  width: 90px;
  border-radius: 5px;
}
.sub_button{
  width:100%;
}
.text {
  font-size: 12px;
  color: #666666;
  line-height: 24px;
  letter-spacing: 1px;
}
.title {
  font-size: 14px;
  color: #333333;
  line-height: 16px;
  letter-spacing: 1px;
}
</style>

